<template>
    <div class="title">ElementPlus</div>
    <div class="inner">
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
    </div>
  </template>
  
  <script setup>
  import { ElMessage } from 'element-plus'
  const handleNodeClick = (data) => {
    ElMessage({
    message: 'success=>'+data.label,
    type: 'success',
   })
   ElMessage.error('error=>'+data.label),
   ElMessage.warning('Warning=>'+data.label),
   ElMessage('this is a message=>'+data.label)
    // console.log(data)
  }
  const data = [
    {
      label: '水果',
      children: [
        {
          label: '葡萄',
          children: [
            {
              label: '水晶葡萄',
            },
          ],
        },
      ],
    },
    {
      label: '美食',
      children: [
        {
          label: '四川美食',
          children: [
            {
              label: '四川麻辣烫',
            },
          ],
        },
        {
          label: '重庆美食',
          children: [
            {
              label: '重庆小面',
            },
          ],
        },
      ],
    },
    {
      label: '旅游景点',
      children: [
        {
          label: '成都',
          children: [
            {
              label: '天府广场',
            },
          ],
        },
        {
          label: '重庆',
          children: [
            {
              label: '解放碑',
            },
          ],
        },
      ],
    },
  ]
  const defaultProps = {
    children: 'children',
    label: 'label',
  }
  </script>
  